<template>
  <div class="classification">
    <van-search placeholder="搜索商品名称" @focus="$router.push('search')"/>
    <div class="concent">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item.category_name"
          v-for="item of classList"
          :key="item.category_id"
        />
      </van-sidebar>
      <div class="concent_list">
        <div class="list_img">
          <img
            :src="
              classList[activeKey].category_list[0].body.items[0].img_url_webp
            "
          />
        </div>
        <ul>
          <li
            v-for="(item, index) of classList[activeKey].category_list"
            :key="index"
          >
            <div class="list_title" v-if="item.body.product_list">
              <span>{{ item.body.title }}</span>
            </div>
            <div
              class="list_information"
              v-for="value of item.body.product_list"
              :key="value.product_id"
              @click="
                $router.push({
                  name: 'details',
                  params: { id: value.product_id },
                })
              "
            >
              <img v-if="item.body.product_list" :src="value.puzzle_url" />
              <div class="right" v-if="item.body.product_list">
                <div class="name">{{ value.name }}</div>
                <div class="price">
                  ￥{{ value.price }}<span class="qi">起</span>
                  <div class="labels" v-if="value.labels">
                    <span
                      class="label"
                      v-for="(label, index) of value.labels"
                      :key="index"
                      >{{ label }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <div class="list_title" v-if="item.body.items && item.body.title">
              <span>{{ item.body.title }}</span>
            </div>
            <div v-if="item.body.items && item.body.title">
              <div class="list_item">
                <div
                  v-for="(value, index) of item.body.items"
                  :key="index"
                  @click="
                    $router.push({
                      name: 'commodityList',
                      params: { index,title:item.body.title},
                    })
                  "
                >
                  <div class="img">
                    <img
                      v-if="item.body.items"
                      :src="'https:' + value.img_url_webp"
                    />
                  </div>
                  <p>{{ value.product_name }}</p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <van-tabbar v-model="navActive" @change="onChange">
      <van-tabbar-item v-for="item of icon" :key="item.id">
        <span>{{ item.name }}</span>
        <template #icon="props">
          <i
            :class="['iconfont', props.active ? item.active : item.inactive]"
          />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import Vue from "vue";
import {
  Tabbar,
  TabbarItem,
  Tab,
  Tabs,
  Search,
  Sidebar,
  SidebarItem,
} from "vant";
import { shuju } from "../assets/js/shuju.js";
Vue.use(Search);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Sidebar);
Vue.use(SidebarItem);
export default {
  name: "classification",
  data() {
    return {
      navActive: 1, //导航栏索引
      icon: [
        {
          id: 1002,
          name: "首页",
          active: "icon-shouyefill",
          inactive: "icon-shouye",
        },
        {
          id: 1003,
          name: "分类",
          active: "icon-sousuoleimufill",
          inactive: "icon-sousuoleimu",
        },
        {
          id: 1004,
          name: "购物车",
          active: "icon-gouwuchefill",
          inactive: "icon-gouwuche",
        },
        {
          id: 1005,
          name: "我的",
          active: "icon-wodefill",
          inactive: "icon-wode",
        },
      ], //底部导航栏数据
      classList: null, //商品数据
      activeKey: 0,
    };
  },
  methods: {
    //切换导航
    onChange() {
      let active = this.navActive;
      active == 0
        ? this.$router.push("/Home")
        : active == 1
        ? this.$router.push("/classification")
        : active == 2
        ? this.$router.push("/ShoppingCart").catch(()=>{})
        : active == 3
        ? this.$router.push("/My")
        : null;
    },
  },
  created() {
    //获取数据
    this.classList = shuju;
  },
};
</script>
<style lang="less">
.classification {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  //内容
  .concent {
    height: 84%;
    display: flex;
    .van-sidebar {
      flex: 0 0 14vh;
      width: 14vh;
      overflow-y: scroll;
      height: 100%;
      &::-webkit-scrollbar {
        width: 0;
      }
      .van-sidebar-item {
        padding: 20px 8px;
        width: 14vh;
        color: #666;
        div {
          width: 100%;
        }
        background: #fff;
        &.van-sidebar-item--select {
          color: #333;
          font-weight: 700;
        }
      }
    }
    //内容列表
    .concent_list {
      flex: 1;
      margin: 0 12px;
      flex-direction: column;
      height: 100%;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        width: 0;
      }
      .list_img {
        width: 100%;
        img {
          width: 100%;
        }
      }
      ul {
        li {
          div {
            width: 100%;
          }
          .list_title {
            background: #fff;
            font-size: 0.28rem;
            text-align: left;
            font-weight: 700;
            margin-top: 0.3rem;
            height: 0.63rem;
            line-height: 0.63rem;
            overflow: hidden;
            color: #333;
          }
          .list_information {
            background: #eee;
            display: flex;
            border-bottom: 10px solid #fff;
            img {
              width: 27%;
            }
            .right {
              width: 73%;
            }
            .name {
              font-size: 0.28rem;
              color: #333;
              margin-left: 0.09rem;
              margin-top: 0.29rem;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .price {
              font-size: 0.3rem;
              color: #333;
              margin-top: 0.15rem;
              margin-left: 0.09rem;
              overflow: hidden;
              text-overflow: ellipsis;
              display: flex;
              height: 0.37rem;
              align-items: center;
              line-height: 1.5em;
              position: relative;
              .qi {
                font-size: 0.18rem;
                position: relative;
                top: 0.03rem;
                display: inline-block;
                margin-left: 0.04rem;
              }
              .labels {
                margin-left: 0.2rem;
                height: 0.37rem;
                display: flex;
                flex-wrap: wrap;
                .label {
                  color: #c69768;
                  border: 1px solid #c69768;
                  font-size: 0.19rem;
                  margin-right: 0.15rem;
                  margin-top: 0.06rem;
                  padding: 1px 0.09rem 0px 0.09rem;
                  border-radius: 0.04rem;
                  height: 0.25rem;
                  line-height: 0.25rem;
                  display: flex;
                  align-items: center;
                  flex-shrink: 0;
                  margin-left: 0.04rem;
                }
              }
            }
          }
          .list_item {
            display: flex;
            flex-wrap: wrap;
            div {
              flex: 0 0 32%;
              width: 32%;
              margin-top: 10px;
              .img {
                width: 100%;
                img {
                  width: 74%;
                  margin: 0 auto;
                }
              }
              p {
                width: 100%;
                margin-top: 0.28rem;
                white-space: nowrap;
                font-size: 0.28rem;
                color: rgba(0, 0, 0, 0.54);
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
  //搜索
  .van-search {
    position: sticky;
    top: 0;
    z-index: 99;
    .van-search__content {
      border-radius: 20px;
      overflow: hidden;
    }
  }
  .van-tabbar--fixed {
    box-shadow: 0 5px 10px 2px rgb(0 0 0);
    .van-tabbar-item {
      i {
        font-size: 21px;
      }
    }
  }
  .van-tabbar-item--active {
    color: #ff6700;
    background-color: #fff;
  }
}
</style>